﻿<!DOCTYPE html>
<html>
  <head>
    <title>设计说明</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/设计说明/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/设计说明/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u2" class="ax_default _一级标题">
        <div id="u2_div" class=""></div>
        <div id="u2_text" class="text ">
          <p><span>一、产品框架</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u3" class="ax_default _一级标题">
        <div id="u3_div" class=""></div>
        <div id="u3_text" class="text ">
          <p><span>慧吃慧搭的页面设计说明：</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u4" class="ax_default box_1">
        <img id="u4_img" class="img " src="images/设计说明/u4.png"/>
        <div id="u4_text" class="text ">
          <p><span>慧吃慧搭</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u5" class="ax_default box_1">
        <img id="u5_img" class="img " src="images/设计说明/u5.png"/>
        <div id="u5_text" class="text ">
          <p><span>菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u6" class="ax_default box_1">
        <img id="u6_img" class="img " src="images/设计说明/u5.png"/>
        <div id="u6_text" class="text ">
          <p><span>发现</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u7" class="ax_default box_1">
        <img id="u7_img" class="img " src="images/设计说明/u5.png"/>
        <div id="u7_text" class="text ">
          <p><span>我的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u8" class="ax_default box_1">
        <div id="u8_div" class=""></div>
        <div id="u8_text" class="text ">
          <p><span>创建菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u9" class="ax_default box_1">
        <div id="u9_div" class=""></div>
        <div id="u9_text" class="text ">
          <p><span>我的菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u10" class="ax_default box_1">
        <div id="u10_div" class=""></div>
        <div id="u10_text" class="text ">
          <p><span>新菜谱建立</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u11" class="ax_default box_1">
        <div id="u11_div" class=""></div>
        <div id="u11_text" class="text ">
          <p><span>菜谱详情</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u12" class="ax_default box_1">
        <div id="u12_div" class=""></div>
        <div id="u12_text" class="text ">
          <p><span>查看菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u13" class="ax_default box_1">
        <div id="u13_div" class=""></div>
        <div id="u13_text" class="text ">
          <p><span>编辑菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u14" class="ax_default _三级标题">
        <div id="u14_div" class=""></div>
        <div id="u14_text" class="text ">
          <p><span>一级页面</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u15" class="ax_default _三级标题">
        <div id="u15_div" class=""></div>
        <div id="u15_text" class="text ">
          <p><span>二级页面</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u16" class="ax_default box_1">
        <div id="u16_div" class=""></div>
        <div id="u16_text" class="text ">
          <p><span>查看菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u17" class="ax_default box_1">
        <div id="u17_div" class=""></div>
        <div id="u17_text" class="text ">
          <p><span>编辑菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u18" class="ax_default box_1">
        <div id="u18_div" class=""></div>
        <div id="u18_text" class="text ">
          <p><span>搜索</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u19" class="ax_default box_1">
        <div id="u19_div" class=""></div>
        <div id="u19_text" class="text ">
          <p><span>图片菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u20" class="ax_default box_1">
        <div id="u20_div" class=""></div>
        <div id="u20_text" class="text ">
          <p><span>视频菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u21" class="ax_default box_1">
        <div id="u21_div" class=""></div>
        <div id="u21_text" class="text ">
          <p><span>推广广告</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u22" class="ax_default box_1">
        <div id="u22_div" class=""></div>
        <div id="u22_text" class="text ">
          <p><span>个人资料</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u23" class="ax_default box_1">
        <div id="u23_div" class=""></div>
        <div id="u23_text" class="text ">
          <p><span>浏览记录</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u24" class="ax_default box_1">
        <div id="u24_div" class=""></div>
        <div id="u24_text" class="text ">
          <p><span>点赞菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u25" class="ax_default box_1">
        <div id="u25_div" class=""></div>
        <div id="u25_text" class="text ">
          <p><span>收藏菜谱</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u26" class="ax_default box_1">
        <div id="u26_div" class=""></div>
        <div id="u26_text" class="text ">
          <p><span>关于慧吃慧搭</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u27" class="ax_default box_1">
        <div id="u27_div" class=""></div>
        <div id="u27_text" class="text ">
          <p><span>设置</span></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u28" class="ax_default _连接线">
        <img id="u28_seg0" class="img " src="images/设计说明/u28_seg0.png" alt="u28_seg0"/>
        <img id="u28_seg1" class="img " src="images/设计说明/u28_seg1.png" alt="u28_seg1"/>
        <img id="u28_seg2" class="img " src="images/设计说明/u28_seg2.png" alt="u28_seg2"/>
        <img id="u28_seg3" class="img " src="images/设计说明/u28_seg3.png" alt="u28_seg3"/>
        <img id="u28_seg4" class="img " src="images/设计说明/u28_seg4.png" alt="u28_seg4"/>
        <div id="u28_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u29" class="ax_default _连接线">
        <img id="u29_seg0" class="img " src="images/设计说明/u29_seg0.png" alt="u29_seg0"/>
        <img id="u29_seg1" class="img " src="images/设计说明/u28_seg3.png" alt="u29_seg1"/>
        <img id="u29_seg2" class="img " src="images/设计说明/u29_seg2.png" alt="u29_seg2"/>
        <div id="u29_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u30" class="ax_default _连接线">
        <img id="u30_seg0" class="img " src="images/设计说明/u30_seg0.png" alt="u30_seg0"/>
        <img id="u30_seg1" class="img " src="images/设计说明/u30_seg1.png" alt="u30_seg1"/>
        <img id="u30_seg2" class="img " src="images/设计说明/u30_seg2.png" alt="u30_seg2"/>
        <img id="u30_seg3" class="img " src="images/设计说明/u28_seg3.png" alt="u30_seg3"/>
        <img id="u30_seg4" class="img " src="images/设计说明/u30_seg4.png" alt="u30_seg4"/>
        <div id="u30_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u31" class="ax_default _连接线">
        <img id="u31_seg0" class="img " src="images/设计说明/u31_seg0.png" alt="u31_seg0"/>
        <img id="u31_seg1" class="img " src="images/设计说明/u31_seg1.png" alt="u31_seg1"/>
        <img id="u31_seg2" class="img " src="images/设计说明/u31_seg2.png" alt="u31_seg2"/>
        <img id="u31_seg3" class="img " src="images/设计说明/u28_seg3.png" alt="u31_seg3"/>
        <img id="u31_seg4" class="img " src="images/设计说明/u31_seg4.png" alt="u31_seg4"/>
        <div id="u31_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u32" class="ax_default _连接线">
        <img id="u32_seg0" class="img " src="images/设计说明/u32_seg0.png" alt="u32_seg0"/>
        <img id="u32_seg1" class="img " src="images/设计说明/u32_seg1.png" alt="u32_seg1"/>
        <img id="u32_seg2" class="img " src="images/设计说明/u32_seg2.png" alt="u32_seg2"/>
        <img id="u32_seg3" class="img " src="images/设计说明/u28_seg3.png" alt="u32_seg3"/>
        <img id="u32_seg4" class="img " src="images/设计说明/u32_seg4.png" alt="u32_seg4"/>
        <div id="u32_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u33" class="ax_default _连接线">
        <img id="u33_seg0" class="img " src="images/设计说明/u33_seg0.png" alt="u33_seg0"/>
        <img id="u33_seg1" class="img " src="images/设计说明/u28_seg3.png" alt="u33_seg1"/>
        <img id="u33_seg2" class="img " src="images/设计说明/u29_seg2.png" alt="u33_seg2"/>
        <div id="u33_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (连接线) -->
      <div id="u34" class="ax_default _连接线">
        <img id="u34_seg0" class="img " src="images/设计说明/u33_seg0.png" alt="u34_seg0"/>
        <img id="u34_seg1" class="img " src="images/设计说明/u28_seg3.png" alt="u34_seg1"/>
        <img id="u34_seg2" class="img " src="images/设计说明/u29_seg2.png" alt="u34_seg2"/>
        <div id="u34_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u35" class="ax_default _一级标题">
        <div id="u35_div" class=""></div>
        <div id="u35_text" class="text ">
          <p><span>二、首屏页面</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u36" class="ax_default label">
        <div id="u36_div" class=""></div>
        <div id="u36_text" class="text ">
          <p><span>十字法构建信息层级</span></p><p><span><br></span></p><p><span>1.罗列产品首屏展示的所有信息</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u37" class="ax_default box_1">
        <div id="u37_div" class=""></div>
        <div id="u37_text" class="text ">
          <p><span>&#149; 日期</span></p><p><span>&#149; 天气温度</span></p><p><span>&#149; 天气情况</span></p><p><span>&#149; 今日事宜做的事情</span></p><p><span>&#149; app广告语</span></p><p><span>&#149; 创建菜谱按钮</span></p><p><span>&#149; 我的菜谱按钮</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u38" class="ax_default label">
        <div id="u38_div" class=""></div>
        <div id="u38_text" class="text ">
          <p><span>2.十字法</span></p>
        </div>
      </div>

      <!-- Unnamed (水平线) -->
      <div id="u39" class="ax_default arrow">
        <img id="u39_img" class="img " src="images/设计说明/u39.png"/>
      </div>

      <!-- Unnamed (垂直线) -->
      <div id="u40" class="ax_default arrow">
        <img id="u40_img" class="img " src="images/设计说明/u40.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u41" class="ax_default label">
        <div id="u41_div" class=""></div>
        <div id="u41_text" class="text ">
          <p><span>重要必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u42" class="ax_default label">
        <div id="u42_div" class=""></div>
        <div id="u42_text" class="text ">
          <p><span>重要不必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u43" class="ax_default label">
        <div id="u43_div" class=""></div>
        <div id="u43_text" class="text ">
          <p><span>必须不重要的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u44" class="ax_default label">
        <div id="u44_div" class=""></div>
        <div id="u44_text" class="text ">
          <p><span>不重要不必须的</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u45" class="ax_default label">
        <div id="u45_div" class=""></div>
        <div id="u45_text" class="text ">
          <p><span><br></span></p><p><span>&#149; 创建菜谱按钮</span></p><p><span>&#149; 我的菜谱按钮</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u46" class="ax_default label">
        <div id="u46_div" class=""></div>
        <div id="u46_text" class="text ">
          <p><span>&#149; app广告语</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u47" class="ax_default label">
        <div id="u47_div" class=""></div>
        <div id="u47_text" class="text ">
          <p><span>&#149; 日期</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u48" class="ax_default label">
        <div id="u48_div" class=""></div>
        <div id="u48_text" class="text ">
          <p><span>&#149; 天气温度</span></p><p><span>&#149; 天气情况</span></p><p><span>&#149; 今日事宜做的事情</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u49" class="ax_default _一级标题">
        <div id="u49_div" class=""></div>
        <div id="u49_text" class="text ">
          <p><span>三、版式布局设计安排：</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u50" class="ax_default box_1">
        <img id="u50_img" class="img " src="images/设计说明/u50.png"/>
        <div id="u50_text" class="text ">
          <p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">用户可以通过拍照或者视频录取食材样貌，慧吃慧搭分析出食材是什么之后，将会利用</span><span style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;">大数据分析</span><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">，给用户</span><span style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;">制定多款科学菜谱</span><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">，避免食物相克，并提供相应</span><span style="font-family:'Arial Normal', 'Arial';font-weight:400;color:#515151;">烹饪教程、食材讲解</span><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">等资料。让每一位“慧儿”都能学会科学搭配饮食，就算厨房小白也能做出一桌营养健康的好菜！</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u51" class="ax_default label">
        <div id="u51_div" class=""></div>
        <div id="u51_text" class="text ">
          <p><span>APP介绍：</span></p>
        </div>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u52" class="ax_default image">
        <img id="u52_img" class="img " src="images/设计说明/u52.png"/>
      </div>

      <!-- Unnamed (图片) -->
      <div id="u53" class="ax_default image">
        <img id="u53_img" class="img " src="images/设计说明/u53.png"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u54" class="ax_default box_1">
        <img id="u54_img" class="img " src="images/设计说明/u54.png"/>
        <div id="u54_text" class="text ">
          <p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">慧吃慧搭app整体UI风格以黑白为主，每一页都有一个显著的标题告诉用户所在的位置，也有较多</span><span style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;">留白</span><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">的处理手法。</span></p><p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;"><br></span></p><p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">在首页的布局中，相似性的文字也摆放在一起，重心偏左，但由于广告语的长度，重心再次回到正中，加上创建菜谱与我的菜谱位置对称，包括下方的标签栏三者位置也对称，给用户一种视觉平衡感。</span></p><p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;"><br></span></p><p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">采取卡片式设计，将多余食材icon半隐藏式，能有效增加信息多样性</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u55" class="ax_default box_1">
        <img id="u55_img" class="img " src="images/设计说明/u54.png"/>
        <div id="u55_text" class="text ">
          <p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">发现采用</span><span style="font-family:'Arial Negreta', 'Arial Normal', 'Arial';font-weight:700;">瀑布流布局+卡片式布局</span><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">，信息被有效规划成一个个的小卡片，用户能快速查阅到各个菜谱的效果图、标题、谁做的等信息。</span></p><p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;"><br></span></p><p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">同时，我添加了搜索框，方便用户搜索含有特定关键词的菜谱。用户也可以点击“图片”或“视频”，查看只带有图片或者只带有视频的菜谱，满足各类型的用户需求。</span></p><p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;"><br></span></p><p><span style="font-family:'Arial Normal', 'Arial';font-weight:400;">排序按时间更新时间排序。</span></p>
        </div>
      </div>
    </div>
  </body>
</html>
